<template>
  <div>
    <Row :gutter="20">
      <i-col :lg="24" :md="24">
      <!-- desc="Business Indicators" -->
        <HomeCard  title="业务指标" desc="业务指标" refresh="true" @refreshMethod="queryKpi">
          <ActivePlate :infoList="infoCardData" />
        </HomeCard>
      </i-col>
    </Row>
    <Row :gutter="20">
      <i-col :lg="16" :md="24">
        <!-- desc="Bad Trend" -->
        <HomeCard  title="拆解及不良数趋势图" desc="拆解及不良数趋势图">
          <ChartLine />
        </HomeCard>
      </i-col>
      <i-col :lg="8" :md="24">
        <!-- desc="Electric Ratio" -->
        <HomeCard  title="电芯型号占比" desc="电芯型号占比">
          <ChartPie />
        </HomeCard>
      </i-col>
    </Row>
    <Row :gutter="20">
      <i-col :lg="16" :md="24">
        <!-- desc="Electric Trend" -->
        <HomeCard  title="电芯缺陷分类趋势图" desc="电芯缺陷分类趋势图">
          <ChartGridLine />
        </HomeCard>
      </i-col>
      <i-col :lg="8" :md="24">
        <!-- desc="Defect TOP" -->
        <HomeCard  title="电芯缺陷类型Top5" desc="电芯缺陷类型Top5">
          <HomeProgress />
        </HomeCard>
      </i-col>
    </Row>
  </div>
</template>

<script>
import ActivePlate from '_c/active-plate/active-plate';
import CountTo from '_c/count-to';
import HomeCard from './components/card';
import ChartPie from './components/chart-pie';
import ChartLine from './components/chart-line';
import ChartGridLine from './components/chart-line-grid';
import ChartGauge from './components/chart-gauge';
import ChartBar from './components/chart-bar';
import HomeCircle from './components/home-circle';
import HomeProgress from './components/home-progress';
import ChartFunnel from './components/chart-funnel';
import { statApi } from '@/api/stat';

export default {
  name: 'Home',
  components: {
    HomeCard,
    ActivePlate,
    CountTo,
    ChartPie,
    ChartFunnel,
    ChartLine,
    ChartGridLine,
    HomeCircle,
    ChartGauge,
    ChartBar,
    HomeProgress
  },
  props: {},
  data() {
    return {
      adModal:true,
      isShow:true,
      infoCardData: [
      ],
      pieData: [
      ],
      processData: [
      ],
      gridLineData:[
      ],
      lineData:[
      ]
    };
  },
  computed: {},
  watch: {},
  filters: {},
  created() {},
  mounted() {
    this.queryKpi();
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  methods: {
    queryKpi() {
      statApi.queryKpiList({}).then(res => {
        if (res.code === 1) {
          this.infoCardData = res.data;
        }
      })
    }
  }
};
</script>

<style lang="less">
.count-style {
  font-size: 50px;
}
</style>
